<template>

  <div class="clearfix">

    <el-tree
      ref="WPCategoryTree"
      v-loading="treeLoading"
      :data="categories"
      node-key="id"
      :default-expanded-keys="categories.length?[categories[0].id]:[]"
      :show-checkbox="showCheckbox"
      :filter-node-method="filterCategoryNode"
      :expand-on-click-node="false"
      :props="{ children: 'children', label: 'name'}"
      check-strictly
      @node-click="handleClickNode"
      @check-change="handleCheckChange"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ node.label + '(ID:' + data.id_category + ')' }}</span>
        <span v-if="data.id !== -1& editable">
          <el-button
            type="text"
            size="mini"
            style="margin-right: 5px;color:orange;"
            @click.stop="showEditCategoryDialog(data)"
          >修改
          </el-button>

          <el-button
            type="text"
            size="mini"
            style="margin-right: 5px;"
            @click.stop="showAddCategoryDialog(data)"
          >添加子目录
          </el-button>

          <el-button
            type="text"
            size="mini"
            style="margin-right: 5px;color:#F56C6C;"
            @click.stop="showDeleteCategoryDialog(data)"
          >删除
          </el-button>
        </span>
      </span>
    </el-tree>
    <el-button
      v-if="editable"
      size="mini"
      style="float: right;margin: 10px 10px 0 0"
      @click.stop="showAddCategoryDialog()"
    >添加顶级分类
    </el-button>
    <el-button
      plain
      icon="el-icon-refresh"
      title="刷新"
      size="mini"
      style="float: left;margin: 10px 10px 0 0;"
      @click="handleFetchTree"
    />
    <el-dialog
      title="目录信息"
      :visible.sync="EditdialogVisible"
      width="30%"
    >
      <el-form label-position="top" label-width="80px" :model="currentEditCategory">
        <el-form-item label="名称">
          <el-input v-model="currentEditCategory.name" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="currentEditCategory.description" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="EditdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditCategory">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  Post as AddCategory,
  Put as EditCategory,
  Delete as DeleteCategory,
  GetTree
} from '@/api/cms/wpcategory'

export default {
  name: 'Wpcategory',
  props: {
    editable: {
      type: Boolean,
      default: true
    },
    account_id: {
      type: Number,
      default: true
    },
    showCheckbox: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      filterText: null,
      treeLoading: false,
      categories: [],
      currentEditCategory: {
        name: '',
        description: ''
      },
      EditdialogVisible: false,
      projects: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.WPCategoryTree.filter(val)
    },
    account_id(val) {
      this.account_id = val
      this.handleFetchTree()
    }
  },
  created() {
    this.handleFetchTree()
  },
  methods: {
    filterCategoryNode(value, data) {
      if (!value) return true
      return data.name.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) !== -1
    },
    showEditCategoryDialog(data) {
      this.currentEditCategory = data
      this.EditdialogVisible = true
      // this.$prompt('请输入目录名称', '修改目录', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消'
      // }).then(({value}) => {
      //   this.treeLoading = true
      //   EditCategory(data.id, {name: value, account_id: this.account_id})
      //     .then(response => {
      //       this.handleFetchTree()
      //     })
      //     .catch(() => {
      //       this.treeLoading = false
      //     })
      // }).catch(() => {
      // });
    },
    handleEditCategory() {
      this.treeLoading = true
      if (this.currentEditCategory.parent === '') {
        this.handleAddCategory()
      } else {
        EditCategory(this.currentEditCategory.id, {
          name: this.currentEditCategory.name,
          description: this.currentEditCategory.description,
          account_id: this.account_id
        })
          .then(response => {
            this.EditdialogVisible = false
            this.handleFetchTree()
          })
          .catch(() => {
            this.treeLoading = false
          })
      }
    },
    showAddCategoryDialog(data) {
      // this.currentEditCategory = data
      this.EditdialogVisible = true
      this.currentEditCategory.name = ''
      this.currentEditCategory.description = ''
      if (data) {
        this.currentEditCategory.id = data.id
      } else {
        this.currentEditCategory.id = 0
      }

      this.currentEditCategory.parent = ''
      // this.$prompt('请输入目录名称', '添加目录', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消'
      // }).then(({ value }) => {
      //   this.treeLoading = true
      //   AddCategory({ name: value, parent_id: data && data.id, account_id: this.account_id })
      //     .then(response => {
      //       this.handleFetchTree()
      //     })
      //     .catch(() => {
      //       this.treeLoading = false
      //     })
      // }).catch(() => {
      // });
    },
    handleAddCategory() {
      this.treeLoading = true
      AddCategory({
        name: this.currentEditCategory.name,
        description: this.currentEditCategory.description,
        parent: this.currentEditCategory.id,
        account_id: this.account_id
      })
        .then(response => {
          this.handleFetchTree()
          this.EditdialogVisible = false
        })
        .catch(() => {
          this.treeLoading = false
        })
    },
    showDeleteCategoryDialog(data) {
      this.$confirm(`确认要删除目录  ${data.name}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.treeLoading = true
        DeleteCategory(data.id)
          .then(response => {
            this.handleFetchTree()
          })
          .catch(() => {
            this.treeLoading = false
          })
      }).catch(() => {
      })
    },
    handleFetchTree() {
      this.treeLoading = true
      GetTree(this.account_id)
        .then(response => {
          this.categories = response.data
          this.treeLoading = false
        })
        .catch(e => {
          this.categories = []
          this.treeLoading = false
        })
    },
    handleClickNode(data) {
      this.$emit('handleClickNode', data)
    },
    handleCheckChange() {
      this.$emit('handleCheckChange', this.$refs.WPCategoryTree.getCheckedNodes())
    }
  }
}
</script>

<style scoped>

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .clearfix ::after {
    content: "";
    display: block;
    clear: both
  }
</style>
